<template>
	<div id="user">
		<Navigation></Navigation>
		<Banner :banner_img="require('../assets/images/banner.jpg')" banner_msg='旅游宝典'></Banner>
		<!-- 头部banner图------------------------------------ -->
		<!-- <div class="img">
			<img src="../assets/images/banner.jpg" class="img1" alt="">
			<div class="introduce">
				<div class="chang">
					<div class="jis">
						<h1 class="clearfix">
							<img class="fl" src="../assets/images/shopping_ic01.png">
							<span class="fl">交通指南</span>
							<img class="fr" src="../assets/images/shopping_ic02.png">
						</h1>
					</div>
				</div>
			</div>
		</div> -->
		<!-- 头部内容图------------------------------------------------------------------ -->
		<div class="banner">
			<p class="text">
				<strong>地理位置</strong>
			</p>
			<p style="text-align: center;">
				古北水镇位于北京市密云区古北口镇司马台村，是北京的东北门户。距北京市区120公里，首都机场98公里，密云区城区60公里，承德市区80公里。
			</p>
			<p style="text-align: center;">
				地处燕山余脉浅丘陵地带，是华北平原通往松辽平原和内蒙古草原的必经要塞之一。
			</p>
			<p class="text">
				<strong>交通信息</strong>
			</p>
			<div class="user-reg">
				<img src="../assets/images/luxian.png">
			</div>
			<div class="user-reg">
				<img src="../assets/images/xinxi.jpg">
			</div>
		</div>
		<Footer></Footer>
	</div>



</template>

<script>
	import Banner from '../components/Banner.vue';
	import Navigation from '../components/Navigation.vue';
	import Footer from '../components/Footer.vue'
	export default{
		components:{Footer,Banner,Navigation},
		data(){
			return {

			}
		}
	}
</script>

<style scoped="scoped">
	img {
		border: none;
	}

	a {
		text-decoration: none;
	}

	ul {
		list-style: none;
	}

	.clearfix::after {
		display: block;
		content: "";
		clear: both;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}




	/* 头部banner样式 */
	#user .img {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 500px;
	}

	#user .img1 {
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 500px;
		margin-left: -960px;
	}

	.introduce {
		position: absolute;
		width: 100%;
		bottom: 20%;
	}

	.introduce .chang {
		width: 1280px;
		margin: 0 auto;
	}

	.introduce .jis {
		color: white;
		width: 230px;
		font-size: 20px;
		font-family: 宋体;
	}

	.introduce h1 {
		width: 100%;
		line-height: 45px;
	}

	.introduce h1>img {
		margin-top: 8px;
	}

	.introduce h1>span {
		margin-left: 13px;
	}

	/* 中间内容样式 */
	.banner .text {
		text-align: center;
		margin-top: 50px;
		font-size: 28px;
	}

	.user-reg img {
		margin: 0 auto;
		display: block;
	}
</style>
